<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>列表展示</title>
    <style>
        #fgDiv {
            position: absolute;
            width: 250px;
            height: 100px;
            border: 1px solid blanchedalmond;
            background-color: greenyellow;
            display: none;
            border-radius: 5px 5px; /*设置圆角*/
        }
        td {
            text-align: center;
        }
        #fgDiv input {
            align-items: center;
        }
    </style>
</head>
<body>
    <input style="position:fixed;left:200px;" type="button" value="添加" id="btnAdd" /><br><br>
    <table border = "1px" cellpadding = "1">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>地址</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <tbody id="tbd">
        </tbody>
    </table>
    <div id="fgDiv">
        <input type="hidden" id="hidId" />
        姓名：<input type="text" id="name" />
        <br>
        地址：<input type="text" id="address" />
        <br>
        电话：<input type="text" id="phone" />
        <br>
        <input type="button" id="btnSave" value="保存" />
    </div>
</body>
</html>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>

    //页面加载事件
    $(function() {
        search();

    })

    //添加
    $("#btnAdd").click(function () {
        //显示添加界面
        $("#fgDiv").css("display", "block").css("left", (window.innerWidth - 250) / 2 + "px").css("top", (window.innerHeight - 100) / 2 + "px");

        //打开的清除文本框中的数据
        $("#fgDiv :text,:hidden").val('');
    });
    //保存
    $("#btnSave").click(function () {
        const data = JSON.stringify({
            "id":$("#hidId").val(),
            "name":$("#name").val(),
            "address":$("#address").val(),
            "phone":$("#phone").val(),
        })
        $.ajax({
            url: '/sss/saveOrUpdate',
            type: 'POST',
            data:data,
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (data) {
                if(data){
                    window.location.reload();
                }
            }
        })

        //隐藏界面
        $("#fgDiv").css("display", "none");
    });

    // 查询整个列表
    function search() {
        $.get(
           "<%=request.getContextPath()%>/sss/queryList",
           function (data) {
                //生成表格数据
               if(data.code == 200){
                   var str = "";
                   for (var i = 0; i < data.data.data.length; i++) {
                       var item = data.data.data[i];
                       str += '<tr id="tr' + item.id + '"><td>'
                           + item.id + '</td><td>'
                           + item.name + '</td><td>'
                           + item.address + '</td><td>'
                           + item.phone + '</td><td><input type="button" value="修改"  onclick="update(' + item.id + ')"/>'
                           + '<input type="button" value="删除" onclick="del(' + item.id + ')"/></td></tr>';
                   }
               }
               $("#tbd").html(str);
            }
        )
    }

    function update(id){
        //显示添加界面
        $("#fgDiv").css("display", "block").css("left", (window.innerWidth - 250) / 2 + "px").css("top", (window.innerHeight - 100) / 2 + "px");
        const tds = $("#tr" + id).children('td');
        //设置文本框的值
        $("#hidId").val(tds[0].innerHTML);//隐藏域存放修改之前的行的ID编号值
        $("#name").val(tds[1].innerHTML);
        $("#address").val(tds[2].innerHTML);
        $("#phone").val(tds[3].innerHTML);
    }

    //删除
    function del(id) {
        $.get(
            "/sss/del?id="+id,
            function(data) {
                if(data.code == 200){
                    window.location.reload();
                }
            }

        )
    }

</script>